<template>
  <div class="markdown-analysis">
    <div class="article-select">
      <el-select v-model="articleName" placeholder="请选择文章名称" clearable>
        <el-option
          v-for="item in articlesArr"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <!-- class的值必须包含 markdown-body -->
    <div class="markdown-body" style="width: 40%; padding: 0 20px">
      <network-article v-if="articleName === 'network'"></network-article>
      <browser-article v-if="articleName === 'browser'"></browser-article>
      <html-css-article v-if="articleName === 'htmlCss'"></html-css-article>
      <js-article v-if="articleName === 'javaScript'"></js-article>
      <vue-article v-if="articleName === 'vue'"></vue-article>
      <readme-article
        v-if="articleName === 'readme' || articleName === ''"
      ></readme-article>
    </div>
  </div>
</template>

<script>
/**
 * @Version 1.1.0
 * @Author DemoHui
 * @Date 2023/03/15
 */

// https://blog.csdn.net/weixin_44090753/article/details/125313105
// http://47.109.79.105:8080/projectLibrary/zeroToone/markdown.html

// markdown样式
import "github-markdown-css";
// 代码高亮
import "highlight.js/styles/github.css";
// 文章内容
import NetworkArticle from "@/assets/markdowns/interviewer/network.md";
import BrowserArticle from "@/assets/markdowns/interviewer/browser.md";
import HtmlCssArticle from "@/assets/markdowns/interviewer/htmlCss.md";
import JsArticle from "@/assets/markdowns/interviewer/javaScript.md";
import VueArticle from "@/assets/markdowns/interviewer/vue.md";
import ReadmeArticle from "@/assets/markdowns/interviewer/readme.md";

export default {
  components: {
    NetworkArticle,
    BrowserArticle,
    HtmlCssArticle,
    JsArticle,
    VueArticle,
    ReadmeArticle,
  },
  data() {
    return {
      articleName: "",
      articlesArr: [
        { label: "network", value: "network" },
        { label: "browser", value: "browser" },
        { label: "htmlCss", value: "htmlCss" },
        { label: "javaScript", value: "javaScript" },
        { label: "vue", value: "vue" },
        { label: "readme", value: "readme" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.article-select {
  margin: 20px;
}
</style>
